    <template>
        <div class='Supplier'> 
            <div class="nav" >
                <router-link to="Home">
                    <img src="../../assets/Fill 1@2.88x.png">
                </router-link>
                我的供应商
            </div>
            <div v-for="(item,index) in data" :key="index">
                <div class="Lists">
                    <div class="List">
                            <div class="List-top">
                                <div class="List-topp">
                                    <p><b>{{item.name}}</b></p>
                                    
                                       <div class="a" @click="goSupplier(index)">
                                             <span>进入店铺</span>
                                            <img src="../../assets/Rectangle 10.png">
                                       </div>
                                      <img src="../../assets/Page 1 2.png" class="List-img" @click="phone"> 
                                    
                                </div>
                                <div class="List-content">
                                    <div class="List-left">
                                        <p>
                                            近30天采购金额(元)                                
                                        </p>
                                        <p>
                                            {{item.saleMonthNum}}
                                        </p>
                                    </div>
                                    <div class="List-right">
                                        <p>
                                            近一年采购金额(元)
                                        </p>
                                        <p>
                                            {{item.saleYearNum}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="List-bottom">
                                    <p class="List-firstp">
                                        店铺满赠
                                    </p>
                                    <p class="List-twop">
                                        店铺购满¥1000减¥100，满500减¥50,满¥200
                                        减200
                                    </p>
                            </div>
                    </div>
                </div>
            </div>
             <div class="list">
                    <div class="list-nav">
                        <p>
                            <b>推荐商品</b>
                        </p>
                        <p @click="active">{{!judge?'展开':'收起'}}
                            <img v-bind="{src:!judge?require('../../assets/icon-wTop.png'):require('../../assets/btn.png')}" >
                        </p>
                       
                    </div>
                    <div class="Shopping-scroll" v-if="!judge">
                        <div class="Shopping-lis">
                            <ul class="Shopping-ul">
                                <li  class="Shopping-li" v-for="(_item,_index) in datas" :key="_index" >
                                    <img :src="_item.picsUrl" alt="" class="li-img">
                                    <p class="li-p">推荐</p>
                                    <span class="li-span">
                                        <p class="p">{{_item.goodsName}}</p>
                                        <span class="span">
                                            <b>¥</b>
                                            <i>{{_item.orderPrice}}</i>
                                        </span>
                                    </span>
                                </li>
                                
                            
                            </ul>
                        </div>
                    </div>
               
                </div>
        </div>
    </template>
 <script>
    import axios from 'axios'
    import { Toast } from 'vant';
     Vue.use(Toast); 
     import Vue from 'vue'
    export default {
        name:'ShoppingList',
        data(){
            return{
             data:[],
             list:[],
             datas:[],
             judge:false,
            }
        },
        methods:{
            active(){
               this.judge=!this.judge
            },
            phone(){
                 Toast('暂无电话');
            },
            getSupplier(){
                    let headers;
                    if (this.$store.state.token) {
                        headers = {
                        token: this.$store.state.token,
                        userId: this.$store.state.userInfo.id
                        };
                    } else {
                        headers = {};
                    }
                    this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/getMyDealerRecordList',{
                        cityId:this.$store.state.merchantInfo.cityId,
                        districtId:this.$store.state.merchantInfo.districtId,
                        merchantId:this.$store.state.merchantInfo.merchantId,
                        provinceId:this.$store.state.merchantInfo.provinceId,
                        stationId:this.$store.state.merchantInfo.stationId,
                        storeId:this.$store.state.storeId.id,
                        streetId:this.$store.state.merchantInfo.streetId,
                        userId:this.$store.state.merchantInfo.userId,
                    },
                    {
                        headers,
                    }
                    )
                    .then(res=>{
                        this.data=res.data.result;
                        this.datas=res.data.result.goodsList;
                        
                    
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            },
            goSupplier(index){
                this.$store.commit('setDealerIds',this.data[index])
                this.$router.push('/shop')
            }
        },
        created(){
          this.getSupplier()
        }
       
        
    }
</script>
    <style lang="scss" scoped>
        .Supplier{
            font-size:0.16rem;
            .nav{    
                position: relative;
                width:100%;
                height:0.44rem;
                display:flex;
                align-items:center;
                justify-content: center;
                border-bottom:0.5px solid #E4E4E4 ;
                img{
                    width:0.08rem;
                    height:0.18rem;
                    position: absolute;
                    left: 0.14rem;
                    top:30%;
                }
            }
            .Lists{
                width:100%;
                height:1.7rem;
                .List{
                    height:1.65rem;
                    margin:0.1rem;
                    .List-top{
                        height:1.11rem;
                        background-image: linear-gradient(-90deg, #F46839 0%, #DD3333 100%);
                        border-radius: 2px;
                        color:#FFFFFF;
                        .List-topp{
                            display:flex;
                            align-items:center;
                            padding-top:0.12rem;
                            justify-content:space-between;
                            :nth-child(2){
                                width:1.1rem;
                                display:flex;
                                align-items: center;
                            }
                            b{
                                margin:0rem 0.14rem 0 0.15rem;
                            }
                            .a{
                                font-family: PingFangSC-Regular;
                                width:0.55rem;
                                height:0.14rem;
                                color:#FFFFFF;
                                text-decoration:none;
                                font-size:0.1rem;
                                padding-left:0.02rem;
                                margin-left:0.2rem;
                                border: 0.4px solid #FFFFFF;
                                border-radius: 8px;
                                display:inline-block;
                                span{
                                    margin-left:0.02rem;
                                }
                                img{
                                    width:0.03rem;
                                    height:0.06rem;
                                    margin-left:0.05rem;
                                    display: inline-block;
                                }
                            }
                            .List-img{
                                width:0.16rem;
                                height:0.16rem;
                                margin-right:0.15rem;
                            }
                        }
                        .List-content{
                            font-family: PingFangSC-Regular;
                            margin-left:0.15rem;
                            font-size: 0.12rem;
                            color: rgba(255,255,255,0.90);
                            margin-top:0.18rem;
                            display: flex;
                            .List-left{
                                margin-right:0.63rem;
                                p{
                                    margin: 0.04rem 0;
                                }
                                :nth-child(2){
                                    font-family: PingFangSC-Regular;
                                    font-size:0.16rem;
                                    opacity: 0.9;
                                }
                            }
                            .List-right{
                                p{
                                    margin: 0.04rem 0;
                                }
                                :nth-child(2){
                                    font-family: PingFangSC-Regular;
                                    font-size:0.16rem;
                                    opacity: 0.9;
                                }
                            }
                        }
                    }
                    .List-bottom{
                        width:100%;
                        height:0.54rem;
                        background: #F8F8F8;
                        font-family: PingFangSC-Regular;
                        font-size: 12px;
                        color: #FFFFFF;
                        display: flex;
                        align-items: center;
                        .List-firstp{
                            width:0.53rem;
                            height:0.16rem;
                            background: #DD3333;
                            font-size:0.12rem;
                            border-radius: 2px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-left:0.14rem
                        }
                        .List-twop{
                            width:2.68rem;
                            height:0.32rem;
                            margin-left:0.09rem;
                            padding-right:0.16rem;
                            word-wrap:break-word ;
                            font-size: 12px;
                            color: #666666;
                        }
                    }
                }
            }
        }
        .list{
            width:100%;
            // margin-top:0.14rem;
            .list-nav{
               width:100%;
               height:0.4rem; 
               display:flex;
               align-items: center;
               justify-content: space-between;
               :nth-child(1){
                   font-size:0.14rem;
                   letter-spacing: -0.47px;
                   margin-left:0.13rem;
               }
               :nth-child(2){
                   font-size:0.1rem;
                   color: #333333;
                   margin-right:0.14rem;
                   display: flex;
                   align-items: center;
                   img{
                       width:0.05rem;
                       height:0.05rem;
                       margin-left:0.05rem;
                   }
               }
            }
            .Shopping-lis{
                width:100%;
                .Shopping-ul{
                        width:100%;
                        height:2.4rem;
                        overflow: hidden;
                        display:flex;
                        justify-content: flex-start;
                        display: -webkit-box;
                        overflow-x: scroll;
                        -webkit-overflow-scrolling: touch;
                    .Shopping-li{
                                width:1.2rem;
                                height:2.3rem;
                                border: 1px solid #CCCCCC;
                                border-radius: 0.02rem;
                                position: relative;
                                margin-left:0.1rem;
                        .li-img{
                            width:1.2rem;
                            height:1.18rem;
                        }
                        .li-p{
                                    height: 0.18rem;
                                    width: 0.34rem;
                                    font-size:0.11rem;
                                    background-image: url(../../assets/tuijian@2.88x.png);
                                    background-size:0.34rem 0.18rem;
                                    color: #fff;
                                    text-align: center;
                                    position: absolute;
                                    left: 0.02rem;
                                    top: 0.02rem;
                        }
                        .li-span{
                            font-size:0.13rem;
                            
                            display: flex;
                            flex-direction: column;
                            .p{  
                                    white-space:nowrap;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    margin-top:0.1rem;
                                    margin-left:0.1rem;
                            }
                            .span{
                                    padding:0rem 0.02rem 0 0.02rem; 
                                    color: #DD3333;
                                    display:inline-block;
                                    margin-top:0.1rem;
                                    margin-left:0.1rem;
                                
                                    b{
                                        font-size: 0.16rem;
                                    }
                                    i{
                                        font-style:normal;
                                    }      
                            }
                        }
                    }
                }::-webkit-scrollbar{
                    width: 0px;
                    height: 0px;
                    display: none;

                }
            }
        }
    </style>

